<template>
  <el-menu
    :default-active="activeMenu"
    class="menu-vertical"
    @select="onSelect"
    router
    background-color="#f5f7fa"
    text-color="#333"
    active-text-color="#409EFF"
  >
    <el-menu-item index="/crawl" class="menu-item-center">
      <el-icon class="menu-icon"><MessageBox /></el-icon>
      <span>视频爬虫</span>
    </el-menu-item>
    <el-menu-item index="/wechat-crawl" class="menu-item-center">
      <el-icon class="menu-icon"><Document /></el-icon>
      <span>文章爬取</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
import { MessageBox, Document } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const activeMenu = computed(() => route.path)

function onSelect(index: string) {
  router.push(index)
}
</script>

<style scoped>
.menu-vertical {
  height: 100%;
  border-right: none;
  font-size: 16px;
  background: #f5f7fa;
}
.menu-icon {
  margin-right: 8px;
  font-size: 18px;
}
.menu-item-center {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.el-menu-item.is-active {
  background: #e6f0fa !important;
  color: #409EFF !important;
}
</style>
